<template>
  <div class="_components_user-message">
    <!-- <div class="reply-frame">
      <img src="../../../assets/home/chat.png" alt="">
    </div> -->
    <el-tabs v-model="type" type="border-card" @tab-click="handleClick">
      <el-tab-pane :disabled="isdisabled" name="text">
        <span slot="label"><i class="el-icon-document" />文本</span>
        <div>
          <el-input v-model="content" type="textarea" placeholder="请输入文本" />
        </div>
      </el-tab-pane>
      <el-tab-pane :disabled="isdisabled" name="image">
        <span slot="label"><i class="el-icon-picture" />图片</span>
        <UserMessageReplyImg :key="key" style="margin: 0 auto" :setinfo="setinfo1" @getInfo="getInfo" />
      </el-tab-pane>
      <el-tab-pane :disabled="isdisabled" name="voice">
        <span slot="label"><i class="el-icon-phone" />音频</span>
        <UserMessageReplyVoice :key="key" :setinfo="setinfo2" @getInfo="getInfo" />
      </el-tab-pane>
      <el-tab-pane :disabled="isdisabled" name="video">
        <span slot="label"><i class="el-icon-share" />视频</span>
        <UserMessageReplyVideo :key="key" :setinfo="setinfo3" @getInfo="getInfo" />
      </el-tab-pane>
      <el-tab-pane :disabled="isdisabled" name="news">
        <span slot="label"><i class="el-icon-news" />图文</span>
        <UserMessageReplyImgText :key="key" :setinfo="setinfo4" @getInfo="getInfo" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import UserMessageReplyImg from './userMessageReply/img'
import UserMessageReplyVideo from './userMessageReply/video'
import UserMessageReplyImgText from './userMessageReply/imgText'
import UserMessageReplyVoice from './userMessageReply/voice'
export default {
  components: {
    UserMessageReplyImg,
    UserMessageReplyVideo,
    UserMessageReplyImgText,
    UserMessageReplyVoice
  },
  props: {
    appId: {
      type: String,
      required: true
    },
    isdisabled: {
      type: Boolean,
      required: false,
      define: false
    }
  },
  data() {
    return {
      setinfo1: {
        // 本地
        mediaId: '',
        type: 'PIC',
        appId: ''
      },
      setinfo2: {
        // 本地
        mediaId: '',
        appId: ''
      },
      setinfo3: {
        // 公众号
        mediaId: '1',
        appId: ''
      },
      setinfo4: {
        // 公众号
        mediaId: '1',
        appId: ''
      },
      key: 1,
      type: 'TEXT',
      content: '',
      info: {}
    }
  },
  mounted() {
    this.setinfo1.appId = this.appId
    this.setinfo2.appId = this.appId
    this.setinfo3.appId = this.appId
    this.setinfo4.appId = this.appId
    // this.handleClick()
  },
  methods: {
    setTags() {
      if (this.info.type === 'text') {
        this.content = this.info.name
      } else if (this.info.type === 'image') {
        this.setinfo1 = this.info
      } else if (this.info.type === 'voice') {
        this.setinfo2 = this.info
      } else if (this.info.type === 'video') {
        this.setinfo3 = this.info
      } else if (this.info.type === 'news') {
        this.setinfo4 = this.info
      }
      this.$nextTick(() => {
        this.type = this.info.type
      })
      this.key++
    },
    handleClick() {
      console.log(this.info)
      this.key++
    },
    getInfo(info) {
      this.info = info
    }
  }
}
</script>

<style lang="scss">
._components_user-message {
  width: 100%;
  .reply-frame {
    background-color: #eee;
    width: 100%;
    height: 300px;
    margin-bottom: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .img_text {
    .img {
      position: relative;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .div1 {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .div2 {
        width: 100%;
        padding: 0 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: rgba(0,0,0,0.6);
        line-height: 28px;
        color: #fff;
        text-align: left;
      }
    }
    .img:before {
      content: "";
      display: block;
    }
    .img1 {
      width: 100%;
      margin-bottom: 5px;
    }
    .img2 {
      width: 20%;
    }
    .img1:before {
      padding-top: 50%;
    }
    .img2:before {
      padding-top: 100%;
    }
    .text-and-img{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      position: relative;
      padding: 0 10px;
      span {
        max-width: 78%;
      }
      >i {
        font-style: normal;
        position: absolute;
        cursor: pointer;
        padding: 5px 10px;
        right: 0;
        bottom: 0;
        background-color: #aaa;
        color: #fff;
        z-index: 1;
      }
    }
  }
  .image-text-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    >li {
      // width: 100%;
      width: 300px;
      padding: 10px;
      border: 1px solid #eee;
      margin-bottom: 10px;
      .btn {
        text-align: center;
      }
    }
  }
}
</style>
